import React, { Component, createContext } from 'react'

const NameContext = createContext()
const MainContext = createContext()

// 给 Context 起一个名字，起名字的目的是在控制台中更好的区分不同的 Context
// 可以通过安装 react 浏览器插件，在控制台中查看给 Context 起的名称，方便检查错误
NameContext.displayName = 'name'
MainContext.displayName = 'main'

class First extends Component {
  render(){
    return (<div>
      First： 

      <Section  />
    </div>)
  }
}

const Section = ()=>{
  return (<div>
    Section:
  </div>)
}

export default class App extends Component {
  render() {
    return (
      <div>
        App
        <NameContext.Provider value={{name: '高举'}}>
            <MainContext.Provider value={{name: '低举'}}>
                <First />
            </MainContext.Provider>
        </NameContext.Provider>
        
      </div>
    )
  }
}
